
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:useBean id="nav" class="org.testfire.realm.control.NavBean" />

<f:view>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TestFire</title>
    
    <link rel=stylesheet href="${nav.href_css_basic}" type="text/css">

    <script type="text/javascript">
        pwdMatcher = new checkPwdMatch();
        pwdMatcher.check();

        function checkPwdMatch(pwd1, pwd2, result_id, match_html, nomatch_html) {
            function enableField(value)
            {
                document.getElementById("form_1:submit_btn").disabled = !value;
            }

            this.check = function() {
                pwd1 = document.getElementById("form_1:password");
                pwd2 = document.getElementById("form_1:password2");
                result_id = "matches_text";
                match_html = "";
                nomatch_html = "<SPAN STYLE=\"color:red\">Please make sure your passwords match.<\/SPAN>";

                // Make sure we don't cause an error
                // for browsers that do not support getElementById
                if (!result_id) {
                    return false;
                }
                if (!document.getElementById) {
                    return false;
                }
                r = document.getElementById(result_id);
                if (!r) {
                    return false;
                }
                //r.innerHTML = "pwd1: " + pwd1 + ":: pwd2: " + pwd2 + "<br>";
                if (pwd1.value == pwd2.value) {
                    r.innerHTML = match_html;
                    enableField(pwd1.value != "");
                }
                else {
                    r.innerHTML = nomatch_html;
                    enableField(false);
                }
            }
        }
    </script>

</head>
<body>

<div id="masthead">
    <h1 id="siteName">TestFire</h1>
    <c:if test="${pageContext.request.userPrincipal.name != null}"><span
            style="float:right ">Logged In: ${pageContext.request.userPrincipal.name}</span></c:if>
    <div id="globalNav">
        <h:form>
            <a id="href_home" href="${nav.href_home}">Home</a> |
            <c:choose>
                <c:when test="${pageContext.request.userPrincipal.name != null}">

                    <h:commandLink id="logout" action="nav_logout" actionListener="#{UserBean.userLogout}">
                        <h:outputText value="Log Out |"/>
                    </h:commandLink>

                </c:when>
                <c:otherwise>
                    <a id="href_account" href="${nav.href_account}">Log In</a> |
                </c:otherwise>
            </c:choose>
        </h:form>
    </div>


    <h2 id="pageName">New User Registration </h2>

    <div id="breadCrumb"><a href="${nav.href_home}">Cancel</a></div>

</div>
<!-- end masthead -->
<div id="headlines_empty">


</div>
<div id="content">
    <div class="content_div">
        <h:form id="form_1">

            <c:set var="u" scope="page" value="#{RegisterUserBean.newUser}"/>
            <table width="100%" height="346" border="0">
                <!--DWLayoutTable-->
                <tr style="height: 20%;">
                    <td width="30%" height="72">&nbsp;</td>
                    <td width="142">&nbsp;</td>
                    <td width="135">&nbsp;</td>
                    <td width="28%">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td height="24"><h:outputLabel for="userName">Choose a User Name:</h:outputLabel></td>
                    <td valign="top">
                        <h:inputText id="userName" size="20" maxlength="50" value="#{u.name}" required="true"
                                     requiredMessage="Please enter a user name."
                                     validator="#{RegisterUserBean.userExists}"/>
                    </td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><h:outputLabel for="password">Choose a Password</h:outputLabel></td>
                    <td>
                        <h:inputSecret id="password" size="20" maxlength="20" value="#{RegisterUserBean.password}"
                                       required="true"
                                       requiredMessage="Please enter a password."
                                       validator="#{RegisterUserBean.isValidPassword}" onkeyup="pwdMatcher.check()"/>
                    </td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><h:outputLabel for="password2">Verify password</h:outputLabel></td>
                    <td>
                        <h:inputSecret id="password2" size="20" maxlength="20" value="#{RegisterUserBean.password2}"
                                       required="true"
                                       requiredMessage="Please verify your password." onkeyup="pwdMatcher.check()"/>
                    </td>
                    <td colspan="2">
                        <DIV ID="matches_text">&nbsp;</DIV>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="1"><h:outputLabel for="hint">Create a password hint:</h:outputLabel></td>
                    <td colspan="3">
                        <h:inputText id="hint" size="60" maxlength="150" value="#{u.pwd_hint}"/>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><h:outputLabel for="email">Your E-mail address:</h:outputLabel></td>
                    <td colspan="2">
                        <h:inputText id="email" size="30" maxlength="100" value="#{u.email}" required="true"
                                     requiredMessage="E-mail address is required for verification."/>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>

                    <td>
                        <h:commandButton id="submit_btn" value="Register" action="#{RegisterUserBean.createNewUser}"/>
                    </td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="4">
                        <h:message styleClass="errorMsg" id="errors0" for="userName"><br>
                        </h:message>
                        <h:message styleClass="errorMsg" id="errors1" for="password"><br>
                        </h:message>
                        <h:message styleClass="errorMsg" id="errors2" for="password2"><br>
                        </h:message>
                        <h:message styleClass="errorMsg" id="errors5" for="email"/>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </h:form>
    </div>    
</div>
<!-- end content -->
</body>
</html>
</f:view>